<template>
  <section class="page-container">
    <DynamicForm :config="dyConfig" :questions="dyQuestions" ref="dynamicForm1" />
    <DynamicTable :tables="dyTable" :config="dyTableConfig" />
  </section>

  <div v-if="state.showDetail">
    <LogDetail v-model:visible="state.showDetail" :rowId="rowId" v-if="rowId !== ''" />
  </div>
</template>

<script lang="ts" setup>
import { getCurrentInstance, onBeforeUnmount, reactive, ref } from 'vue';
import { DynamicForm, DynamicTable } from '@/components/public-template';
import { DYNAMICLOCALTABLE } from '@/mixins/subject/subject-types';
import { filter } from 'rxjs/operators';
import LogDetail from './components/logDetail.vue';
import indexService from './index.service';
import { Api } from '@/config/api/logManage';

const { proxy }: any = getCurrentInstance();

const dyQuestions = reactive(indexService.getQuestions());
const dyConfig: any = {
  grid: 8,
  labelCol: 6,
  wrapperCol: 18,
  style: 'table-form',
  cancelSave: true
};

const dyTable = reactive(indexService.getTables());
const dyTableConfig: any = {
  queryUrl: Api.page,
  protType: 'post',
  isScreen: true
};

let rowId = ref<string>('');
const state = reactive({
  showDetail: false
});

const subscribeSub = proxy.$NotificationPubSub
  .getParams()
  .pipe(filter((res) => res !== 0))
  .subscribe((item: any) => {
    if (item.key === DYNAMICLOCALTABLE) {
      rowId.value = item.value.data.id;
      state.showDetail = true;
    }
  });

onBeforeUnmount(() => {
  subscribeSub && subscribeSub.unsubscribe();
  proxy.$NotificationPubSub.clearParams();
});
</script>
